<template>
  <!-- 内容列表 组件 -->
  <div class="list_box">
    <van-tabs
      v-model:active="active"
      animated
      swipeable
      sticky
      offset-top="2.5rem"
      title-active-color="black"
      title-inactive-color="#777777"
      @click-tab="handelTitle"
    >
      <van-tab title="精讲课程">
        <LiveItem2 v-for="item in shortList" :key="item" />
      </van-tab>
      <van-tab title="基础专题">基础专题</van-tab>
      <van-tab title="真题解析">真题解析</van-tab>
      <van-tab title="最近直播">最近直播</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import LiveItem2 from "@/components/live/LiveItem2.vue";
import { ref } from "@vue/reactivity";
export default {
  components: { LiveItem2 },
  setup() {
    const active = ref(0);
    const shortList = ref([0, 1, 2, 3, 4]);
    const handelTitle = (e) => {
      console.log(e);
    };
    return { active, shortList, handelTitle };
  },
};
</script>

<style lang="less" scoped>
// :deep(.van-tabs__wrap) {
//   position: fixed;
//   top: 2.5rem;
//   left: 0;
//   width: 100%;
//   z-index: 99;
// }
:deep(.van-tabs__content) {
  padding: 0 0.5rem;
  padding-top: 1rem;
  box-sizing: border-box;
}
:deep(.van-tab) {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05rem;
}
:deep(.van-tabs__line) {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  transition: none;
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 5px solid red;
}
.list_box {
  width: 100%;
  //   padding: 0 0.5rem;
  //   box-sizing: border-box;
}
</style>
